<!--Created by daminghu-cli yasenagat# on 2020-05-08 16:28:01-->


<template>
    <div class="fillcontain">

        <div class="table_container">

            <el-form :inline="true" :model="queryForm" ref="queryForm" class="demo-form-inline">


                <!--<el-form-item label="id" prop="id">-->
                    <!--<el-input v-model="queryForm.id" placeholder="请输入id"></el-input>-->
                <!--</el-form-item>-->


                <el-form-item label="应用名称" prop="app_name">
                    <el-input v-model="queryForm.app_name" placeholder="请输入应用名称"></el-input>
                </el-form-item>


                <el-form-item label="agent的应用名称" prop="agent_app_name">
                    <el-input v-model="queryForm.agent_app_name" placeholder="请输入agent的应用名称"></el-input>
                </el-form-item>


                <!--<el-form-item label="监控端口" prop="monitor_port">-->
                    <!--<el-input v-model="queryForm.monitor_port" placeholder="请输入监控端口"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="nats地址" prop="nats_addr">-->
                    <!--<el-input v-model="queryForm.nats_addr" placeholder="请输入nats地址"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="应用主题前缀" prop="app_prefix_subject">-->
                    <!--<el-input v-model="queryForm.app_prefix_subject" placeholder="请输入应用主题前缀"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="接受svr状态的主题" prop="api_svr_status_subject">-->
                    <!--<el-input v-model="queryForm.api_svr_status_subject" placeholder="请输入接受svr状态的主题"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="解析worker数量" prop="parse_worker_num">-->
                    <!--<el-input v-model="queryForm.parse_worker_num" placeholder="请输入解析worker数量"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="写wroker数量" prop="write_worker_num">-->
                    <!--<el-input v-model="queryForm.write_worker_num" placeholder="请输入写wroker数量"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="读取的chan数量" prop="read_chan_num">-->
                    <!--<el-input v-model="queryForm.read_chan_num" placeholder="请输入读取的chan数量"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="写入的chan数量" prop="writer_chan_num">-->
                    <!--<el-input v-model="queryForm.writer_chan_num" placeholder="请输入写入的chan数量"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="influxdb地址" prop="influx_db_addr">-->
                    <!--<el-input v-model="queryForm.influx_db_addr" placeholder="请输入influxdb地址"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="influxdb用户名" prop="influx_db_username">-->
                    <!--<el-input v-model="queryForm.influx_db_username" placeholder="请输入influxdb用户名"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="influxdb密码" prop="influx_db_password">-->
                    <!--<el-input v-model="queryForm.influx_db_password" placeholder="请输入influxdb密码"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="influxdb数据库" prop="influx_db_database">-->
                    <!--<el-input v-model="queryForm.influx_db_database" placeholder="请输入influxdb数据库"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="监控地址" prop="monitor_url">-->
                    <!--<el-input v-model="queryForm.monitor_url" placeholder="请输入监控地址"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="请求超时" prop="req_time_out_second">-->
                    <!--<el-input v-model="queryForm.req_time_out_second" placeholder="请输入请求超时"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="批量写入数量" prop="batch_write_num">-->
                    <!--<el-input v-model="queryForm.batch_write_num" placeholder="请输入批量写入数量"></el-input>-->
                <!--</el-form-item>-->


                <!--<el-form-item label="更新时间" prop="update_time">-->
                    <!--<el-input v-model="queryForm.update_time" placeholder="请输入更新时间"></el-input>-->
                <!--</el-form-item>-->


                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                    <el-button type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
                </el-form-item>
            </el-form>
            <!--<el-form>-->
                <!--<el-form-item>-->
                    <!--<el-button type="primary" icon="el-icon-plus" @click="handleCreate">立即创建</el-button>-->
                <!--</el-form-item>-->
            <!--</el-form>-->

            <el-table
                ref="queryTable"
                border
                stripe
                :data="tableData"
                @row-click="handleRowClick"
                highlight-current-row
                style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">


                            <el-form-item label-width="150px" label="id">
                                <span>{{ props.row.id}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="应用名称">
                                <span>{{ props.row.app_name}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="agent的应用名称">
                                <span>{{ props.row.agent_app_name}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="监控端口">
                                <span>{{ props.row.monitor_port}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="nats地址">
                                <span>{{ props.row.nats_addr}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="应用主题前缀">
                                <span>{{ props.row.app_prefix_subject}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="接受svr状态的主题">
                                <span>{{ props.row.api_svr_status_subject}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="解析worker数量">
                                <span>{{ props.row.parse_worker_num}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="写wroker数量">
                                <span>{{ props.row.write_worker_num}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="读取的chan数量">
                                <span>{{ props.row.read_chan_num}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="写入的chan数量">
                                <span>{{ props.row.writer_chan_num}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="influxdb地址">
                                <span>{{ props.row.influx_db_addr}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="influxdb用户名">
                                <span>{{ props.row.influx_db_username}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="influxdb密码">
                                <span>{{ props.row.influx_db_password}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="influxdb数据库">
                                <span>{{ props.row.influx_db_database}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="监控地址">
                                <span>{{ props.row.monitor_url}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="请求超时">
                                <span>{{ props.row.req_time_out_second}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="批量写入数量">
                                <span>{{ props.row.batch_write_num}}</span>
                            </el-form-item>


                            <el-form-item label-width="150px" label="更新时间">
                                <span>{{ formatStrTime(props.row.update_time)}}</span>
                            </el-form-item>


                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    type="index"
                    label="序号"
                    width="80">
                </el-table-column>


                <!--<el-table-column-->
                    <!--property="id"-->
                    <!--label="id"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <el-table-column
                    property="app_name"
                    label="应用名称"
                    width="120">
                </el-table-column>

                <el-table-column
                    property="update_time"
                    label="状态"
                    width="120"
                    :formatter="formatColumnCreateTime">

                    <template slot-scope="scope">
                        <el-tag v-if="formatAppStatus(scope.row.update_time)>10" type="danger">离线</el-tag>
                        <el-tag v-if="formatAppStatus(scope.row.update_time)<10" type="success">在线</el-tag>
                    </template>

                </el-table-column>

                <el-table-column
                    property="agent_app_name"
                    label="agent的应用名称"
                    width="120">
                </el-table-column>

                <!--<el-table-column-->
                    <!--property="monitor_port"-->
                    <!--label="监控端口"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="nats_addr"-->
                    <!--label="nats地址"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="app_prefix_subject"-->
                    <!--label="应用主题前缀"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="api_svr_status_subject"-->
                    <!--label="接受svr状态的主题"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <el-table-column
                    property="parse_worker_num"
                    label="解析worker数量"
                    width="120">
                </el-table-column>

                <el-table-column
                    property="write_worker_num"
                    label="写wroker数量"
                    width="120">
                </el-table-column>

                <el-table-column
                    property="read_chan_num"
                    label="读取的chan数量"
                    width="120">
                </el-table-column>

                <el-table-column
                    property="writer_chan_num"
                    label="写入的chan数量"
                    width="120">
                </el-table-column>

                <!--<el-table-column-->
                    <!--property="influx_db_addr"-->
                    <!--label="influxdb地址"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="influx_db_username"-->
                    <!--label="influxdb用户名"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="influx_db_password"-->
                    <!--label="influxdb密码"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="influx_db_database"-->
                    <!--label="influxdb数据库"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <!--<el-table-column-->
                    <!--property="monitor_url"-->
                    <!--label="监控地址"-->
                    <!--width="120">-->
                <!--</el-table-column>-->

                <el-table-column
                    property="req_time_out_second"
                    label="请求超时"
                    width="120">
                </el-table-column>

                <el-table-column
                    property="batch_write_num"
                    label="批量写入数量"
                    width="120">
                </el-table-column>

                <el-table-column
                    property="update_time"
                    label="更新时间"
                    width="120"
                    :formatter="formatColumnCreateTime">
                </el-table-column>


                <!--<el-table-column label="操作" width="200">-->
                    <!--<template slot-scope="scope">-->
                        <!--&lt;!&ndash;<el-button-->
                            <!--size="mini"-->
                            <!--type="success" icon="el-icon-edit"-->
                            <!--@click="handleQueryOne(scope.$index, scope.row)">查看-->
                        <!--</el-button>&ndash;&gt;-->
                        <!--<el-button-->
                            <!--size="mini"-->
                            <!--type="success" icon="el-icon-edit"-->
                            <!--@click="handleUpdate(scope.$index, scope.row)">编辑-->
                        <!--</el-button>-->
                        <!--<el-button-->
                            <!--size="mini"-->
                            <!--type="danger" icon="el-icon-close"-->
                            <!--@click="handleDelete(scope.$index, scope.row)">删除-->
                        <!--</el-button>-->
                    <!--</template>-->
                <!--</el-table-column>-->
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </div>

            <!--<el-dialog :title="commandDialogTitle" :visible.sync="commandDialogFormVisible">-->
                <!--<el-form :model="commandFormData" :rules="rules" ref="commandForm">-->


                    <!--<el-form-item label="id" prop="id">-->
                        <!--<el-input v-model="commandFormData.id" placeholder="请输入id"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="应用名称" prop="app_name">-->
                        <!--<el-input v-model="commandFormData.app_name" placeholder="请输入应用名称"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="agent的应用名称" prop="agent_app_name">-->
                        <!--<el-input v-model="commandFormData.agent_app_name" placeholder="请输入agent的应用名称"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="监控端口" prop="monitor_port">-->
                        <!--<el-input v-model="commandFormData.monitor_port" placeholder="请输入监控端口"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="nats地址" prop="nats_addr">-->
                        <!--<el-input v-model="commandFormData.nats_addr" placeholder="请输入nats地址"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="应用主题前缀" prop="app_prefix_subject">-->
                        <!--<el-input v-model="commandFormData.app_prefix_subject" placeholder="请输入应用主题前缀"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="接受svr状态的主题" prop="api_svr_status_subject">-->
                        <!--<el-input v-model="commandFormData.api_svr_status_subject"-->
                                  <!--placeholder="请输入接受svr状态的主题"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="解析worker数量" prop="parse_worker_num">-->
                        <!--<el-input v-model="commandFormData.parse_worker_num" placeholder="请输入解析worker数量"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="写wroker数量" prop="write_worker_num">-->
                        <!--<el-input v-model="commandFormData.write_worker_num" placeholder="请输入写wroker数量"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="读取的chan数量" prop="read_chan_num">-->
                        <!--<el-input v-model="commandFormData.read_chan_num" placeholder="请输入读取的chan数量"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="写入的chan数量" prop="writer_chan_num">-->
                        <!--<el-input v-model="commandFormData.writer_chan_num" placeholder="请输入写入的chan数量"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb地址" prop="influx_db_addr">-->
                        <!--<el-input v-model="commandFormData.influx_db_addr" placeholder="请输入influxdb地址"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb用户名" prop="influx_db_username">-->
                        <!--<el-input v-model="commandFormData.influx_db_username" placeholder="请输入influxdb用户名"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb密码" prop="influx_db_password">-->
                        <!--<el-input v-model="commandFormData.influx_db_password" placeholder="请输入influxdb密码"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb数据库" prop="influx_db_database">-->
                        <!--<el-input v-model="commandFormData.influx_db_database" placeholder="请输入influxdb数据库"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="监控地址" prop="monitor_url">-->
                        <!--<el-input v-model="commandFormData.monitor_url" placeholder="请输入监控地址"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="请求超时" prop="req_time_out_second">-->
                        <!--<el-input v-model="commandFormData.req_time_out_second" placeholder="请输入请求超时"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="批量写入数量" prop="batch_write_num">-->
                        <!--<el-input v-model="commandFormData.batch_write_num" placeholder="请输入批量写入数量"></el-input>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="更新时间" prop="update_time">-->
                        <!--<el-input v-model="commandFormData.update_time" placeholder="请输入更新时间"></el-input>-->
                    <!--</el-form-item>-->


                <!--</el-form>-->
                <!--<div slot="footer" class="dialog-footer">-->
                    <!--<el-button @click="commandDialogFormVisible = false">取 消</el-button>-->
                    <!--<el-button type="primary" @click="commandUser('commandForm')">确 定</el-button>-->
                <!--</div>-->
            <!--</el-dialog>-->

            <!--<el-dialog :title="queryOneDialogTitle" :visible.sync="queryOneDialogFormVisible">-->
                <!--<el-form :model="queryOneFormData" class="view-dialog">-->


                    <!--<el-form-item label="id">-->
                        <!--<span>{{ queryOneFormData.id }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="应用名称">-->
                        <!--<span>{{ queryOneFormData.app_name }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="agent的应用名称">-->
                        <!--<span>{{ queryOneFormData.agent_app_name }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="监控端口">-->
                        <!--<span>{{ queryOneFormData.monitor_port }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="nats地址">-->
                        <!--<span>{{ queryOneFormData.nats_addr }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="应用主题前缀">-->
                        <!--<span>{{ queryOneFormData.app_prefix_subject }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="接受svr状态的主题">-->
                        <!--<span>{{ queryOneFormData.api_svr_status_subject }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="解析worker数量">-->
                        <!--<span>{{ queryOneFormData.parse_worker_num }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="写wroker数量">-->
                        <!--<span>{{ queryOneFormData.write_worker_num }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="读取的chan数量">-->
                        <!--<span>{{ queryOneFormData.read_chan_num }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="写入的chan数量">-->
                        <!--<span>{{ queryOneFormData.writer_chan_num }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb地址">-->
                        <!--<span>{{ queryOneFormData.influx_db_addr }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb用户名">-->
                        <!--<span>{{ queryOneFormData.influx_db_username }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb密码">-->
                        <!--<span>{{ queryOneFormData.influx_db_password }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="influxdb数据库">-->
                        <!--<span>{{ queryOneFormData.influx_db_database }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="监控地址">-->
                        <!--<span>{{ queryOneFormData.monitor_url }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="请求超时">-->
                        <!--<span>{{ queryOneFormData.req_time_out_second }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="批量写入数量">-->
                        <!--<span>{{ queryOneFormData.batch_write_num }}</span>-->
                    <!--</el-form-item>-->


                    <!--<el-form-item label="更新时间">-->
                        <!--<span>{{ queryOneFormData.update_time }}</span>-->
                    <!--</el-form-item>-->


                <!--</el-form>-->
            <!--</el-dialog>-->
        </div>
    </div>
</template>

<script>
    import {
        api_readmany_tb_svr,
        api_readcount_tb_svr, api_deleteone_tb_svr,
        api_updateone_tb_svr, api_updatexxx_tb_svr,
        api_createone_tb_svr,
        isResultOk
    } from '@/api/api'
    import {utilFormatMoneyFen2Yuan, utilFormatStrTime,utilDiffStrTimeAndNow} from "../api/util";

    export default {
        data() {
            return {
                commandDialogFormVisible: false,
                commandDialogTitle: 'tb_svr',
                commandFormData: {


                    id: '',


                    app_name: '',


                    agent_app_name: '',


                    monitor_port: '',


                    nats_addr: '',


                    app_prefix_subject: '',


                    api_svr_status_subject: '',


                    parse_worker_num: '',


                    write_worker_num: '',


                    read_chan_num: '',


                    writer_chan_num: '',


                    influx_db_addr: '',


                    influx_db_username: '',


                    influx_db_password: '',


                    influx_db_database: '',


                    monitor_url: '',


                    req_time_out_second: '',


                    batch_write_num: '',


                    update_time: '',


                },
                commandType: 1,
                queryOneDialogFormVisible: false,
                queryOneDialogTitle: 'tb_svr',
                queryOneFormData: {},
                tableData: [],
                offset: 0,
                count: 1000,
                currentPage: 1,
                pageSize: 20,
                pageSizes: [20, 30, 40, 100],
                queryForm: {


                    id: '',


                    app_name: '',


                    agent_app_name: '',


                    monitor_port: '',


                    nats_addr: '',


                    app_prefix_subject: '',


                    api_svr_status_subject: '',


                    parse_worker_num: '',


                    write_worker_num: '',


                    read_chan_num: '',


                    writer_chan_num: '',


                    influx_db_addr: '',


                    influx_db_username: '',


                    influx_db_password: '',


                    influx_db_database: '',


                    monitor_url: '',


                    req_time_out_second: '',


                    batch_write_num: '',


                    update_time: '',


                },
                rules: {


                    id: [
                        {required: true, message: "请输入id", trigger: 'blur'},
                    ],


                    app_name: [
                        {required: true, message: "请输入应用名称", trigger: 'blur'},
                    ],


                    agent_app_name: [
                        {required: true, message: "请输入agent的应用名称", trigger: 'blur'},
                    ],


                    monitor_port: [
                        {required: true, message: "请输入监控端口", trigger: 'blur'},
                    ],


                    nats_addr: [
                        {required: true, message: "请输入nats地址", trigger: 'blur'},
                    ],


                    app_prefix_subject: [
                        {required: true, message: "请输入应用主题前缀", trigger: 'blur'},
                    ],


                    api_svr_status_subject: [
                        {required: true, message: "请输入接受svr状态的主题", trigger: 'blur'},
                    ],


                    parse_worker_num: [
                        {required: true, message: "请输入解析worker数量", trigger: 'blur'},
                    ],


                    write_worker_num: [
                        {required: true, message: "请输入写wroker数量", trigger: 'blur'},
                    ],


                    read_chan_num: [
                        {required: true, message: "请输入读取的chan数量", trigger: 'blur'},
                    ],


                    writer_chan_num: [
                        {required: true, message: "请输入写入的chan数量", trigger: 'blur'},
                    ],


                    influx_db_addr: [
                        {required: true, message: "请输入influxdb地址", trigger: 'blur'},
                    ],


                    influx_db_username: [
                        {required: true, message: "请输入influxdb用户名", trigger: 'blur'},
                    ],


                    influx_db_password: [
                        {required: true, message: "请输入influxdb密码", trigger: 'blur'},
                    ],


                    influx_db_database: [
                        {required: true, message: "请输入influxdb数据库", trigger: 'blur'},
                    ],


                    monitor_url: [
                        {required: true, message: "请输入监控地址", trigger: 'blur'},
                    ],


                    req_time_out_second: [
                        {required: true, message: "请输入请求超时", trigger: 'blur'},
                    ],


                    batch_write_num: [
                        {required: true, message: "请输入批量写入数量", trigger: 'blur'},
                    ],


                    update_time: [
                        {required: true, message: "请输入更新时间", trigger: 'blur'},
                    ],


                },
            }
        },
        components: {},
        created() {
            this.initData();
        },
        methods: {
            async initData() {
                try {
                    this.commandRefresh()
                } catch (err) {
                    console.log('获取数据失败', err);
                }
            },
            handleRowClick(row, column, event) {
                // console.log("handleRowClick : " + row);
            },
            handleQueryOne(index, row) {
                this.queryOneDialogTitle = "查看tb_svr"
                this.queryOneDialogFormVisible = true
                this.queryOneFormData = row
            },
            handleDelete(index, row) {

                // console.log(index, row)

                this.$confirm(`删除【 ${ row.id } 】, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    this.deleteOne(row.id)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async commandUser(formName) {
                try {
                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {
                            // console.log("formdata : ", this.commandFormData)
                            let res = {}
                            //this.commandFormData.id
                            if (this.commandType == 1) {
                                res = await api_updateone_tb_svr(this.commandFormData);
                            } else {
                                res = await api_createone_tb_svr(this.commandFormData);
                            }
                            if (isResultOk(res)) {
                                this.commandDialogFormVisible = false
                                this.commandRefresh()
                            } else {
                            }
                        } else {
                            this.$message({
                                type: 'error',
                                message: '请输入正确的内容!'
                            });
                        }
                    });
                } catch (err) {
                    this.$message({
                        type: 'error',
                        message: '操作失败!'
                    });
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.commandReadMany()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.offset = (val - 1) * this.pageSize;
                this.commandReadMany()
            },
            commandRefresh() {
                // this.commandReadCount()
                this.commandReadMany()
            },
            async commandReadMany() {
                const res = await api_readmany_tb_svr({
                    offset: this.offset,
                    limit: this.pageSize,


                    // id: this.queryForm.id,

                    app_name: this.queryForm.app_name,

                    agent_app_name: this.queryForm.agent_app_name,

                    // monitor_port: this.queryForm.monitor_port,
                    //
                    // nats_addr: this.queryForm.nats_addr,
                    //
                    // app_prefix_subject: this.queryForm.app_prefix_subject,
                    //
                    // api_svr_status_subject: this.queryForm.api_svr_status_subject,
                    //
                    // parse_worker_num: this.queryForm.parse_worker_num,
                    //
                    // write_worker_num: this.queryForm.write_worker_num,
                    //
                    // read_chan_num: this.queryForm.read_chan_num,
                    //
                    // writer_chan_num: this.queryForm.writer_chan_num,
                    //
                    // influx_db_addr: this.queryForm.influx_db_addr,
                    //
                    // influx_db_username: this.queryForm.influx_db_username,
                    //
                    // influx_db_password: this.queryForm.influx_db_password,
                    //
                    // influx_db_database: this.queryForm.influx_db_database,
                    //
                    // monitor_url: this.queryForm.monitor_url,
                    //
                    // req_time_out_second: this.queryForm.req_time_out_second,
                    //
                    // batch_write_num: this.queryForm.batch_write_num,
                    //
                    // update_time: this.queryForm.update_time,


                });
                if (isResultOk(res)) {
                    this.tableData = res.body.items
                    this.count = res.body.count;
                }
                console.log(this.tableData)
            },
            // async commandReadCount() {
            //     const res = await api_readcount_tb_svr({
            //
            //
            //         id: this.queryForm.id,
            //
            //         app_name: this.queryForm.app_name,
            //
            //         agent_app_name: this.queryForm.agent_app_name,
            //
            //         monitor_port: this.queryForm.monitor_port,
            //
            //         nats_addr: this.queryForm.nats_addr,
            //
            //         app_prefix_subject: this.queryForm.app_prefix_subject,
            //
            //         api_svr_status_subject: this.queryForm.api_svr_status_subject,
            //
            //         parse_worker_num: this.queryForm.parse_worker_num,
            //
            //         write_worker_num: this.queryForm.write_worker_num,
            //
            //         read_chan_num: this.queryForm.read_chan_num,
            //
            //         writer_chan_num: this.queryForm.writer_chan_num,
            //
            //         influx_db_addr: this.queryForm.influx_db_addr,
            //
            //         influx_db_username: this.queryForm.influx_db_username,
            //
            //         influx_db_password: this.queryForm.influx_db_password,
            //
            //         influx_db_database: this.queryForm.influx_db_database,
            //
            //         monitor_url: this.queryForm.monitor_url,
            //
            //         req_time_out_second: this.queryForm.req_time_out_second,
            //
            //         batch_write_num: this.queryForm.batch_write_num,
            //
            //         update_time: this.queryForm.update_time,
            //
            //
            //     });
            //     if (isResultOk(res)) {
            //         this.count = res.body.count;
            //     } else {
            //     }
            // },
            async deleteOne(id) {
                const res = await api_deleteone_tb_svr({

                    id: id

                });
                if (isResultOk(res)) {
                    this.commandRefresh()
                } else {
                }
            },
            handleQuery() {
                console.log('handleQuery!', this.queryForm);
                this.commandRefresh()
            },
            handleClear() {
                this.$refs['queryForm'].resetFields();
                console.log('handleClear!', this.$refs['queryForm'], this.queryForm);
                this.commandRefresh()
            },
            handleCreate() {
                this.commandDialogFormVisible = true
                this.commandType = 2
                this.commandDialogTitle = "创建tb_svr"
                this.commandFormData = {}
                console.log("handleCreate : ")
            },
            handleUpdate(index, row) {
                this.commandDialogFormVisible = true
                this.commandType = 1
                this.commandDialogTitle = "修改tb_svr"
                this.commandFormData = row
                console.log("handleUpdate : ")
            },
            formatColumnCreateTime(row, column, cellValue, index) {
                return utilFormatStrTime(cellValue)
            },
            formatColumnMoney(row, column, cellValue, index) {
                return this.formatMoney(cellValue)
            },
            formatMoney(str) {
                return utilFormatMoneyFen2Yuan(str)
            },
            formatStrTime(str) {
                return utilFormatStrTime(str)
            },
            formatAppStatus(str) {
                return utilDiffStrTimeAndNow(str)
            },
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }


</style>
